<template>
	<view class="container">
		<view class="hg-30"></view>
		<view class="choose">
			<text>选择支付方式</text>
			<view class="ipt">
				<view @click="handleSelect(2)">
					<view v-if="taskDTO.payType != 2" class="circle"></view>
					<image v-if="taskDTO.payType == 2" src="https://images.linglinggong.net/icon1/51.png"
						mode="aspectFill"></image>
					<image class="img" src="https://images.linglinggong.net/icon2/05.png" mode="aspectFill"></image>
					<text>钱包支付</text>
					<text class="my-money">(余额: {{ userInfo.amount/100}} )</text>
				</view>
				<!--  #ifdef MP-ALIPAY || MP-TOUTIAO -->
				<view @click="handleSelect(0)">
					<view v-if="taskDTO.payType != 0" class="circle"></view>
					<image v-if="taskDTO.payType == 0" src="https://images.linglinggong.net/icon1/51.png"
						mode="aspectFill"></image>
					<image class="img" src="https://images.linglinggong.net/icon1/26.png" mode="aspectFill"></image>
					<text>支付宝支付</text>
				</view>
				<!-- #endif -->
				<!--  #ifdef MP-WEIXIN || MP-TOUTIAO -->
				<view @click="handleSelect(3)">
					<view v-if="taskDTO.payType != 3" class="circle"></view>
					<image v-if="taskDTO.payType == 3" src="https://images.linglinggong.net/icon1/51.png"
						mode="aspectFill"></image>
					<image class="img" src="https://images.linglinggong.net/icon1/53.png" mode="aspectFill"></image>
					<text>微信支付</text>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="main">
			<view class="title" @click="handleChooseCoupon" v-if="hasCoupon==0">
				<text>优惠券</text>
				<view>
					<view v-if="!couponName">
						<text style="margin-right: 10rpx;" v-if="Object.keys(couponTypeObj).length !== 0"
							:class="[!!couponAvailableList[0]?'couponAvailable1':'couponAvailable-no']">{{!!couponAvailableList[0]?'推荐奖励减'+couponAvailableList[1]+'元':'暂无可用'}}</text>
						<text style="margin-right: 10rpx;" v-else
							:class="[!!couponAvailableList[0]?'couponAvailable':'couponAvailable-no']">{{!!couponAvailableList[0]?'未选，最高可减'+couponAvailableList[1]+'元':'暂无可用'}}</text>
					</view>
					<text v-if="couponName&&(couponType===0||couponType===2)"
						class="couponAvailable-num">{{`-${couponName}元`}}</text>
					<text v-if="couponName&&couponType===1"
						class="couponAvailable-num">{{`-${(taskAmount/100)*(100-couponName*100)/100}元`}}</text>
					<image src="https://images.linglinggong.net/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="detail">
				<view>
					<text>总计薪资</text>
					<text>{{ taskAmount/100 }}元</text>
				</view>
				<view v-if="hasCoupon==0">
					<text>优惠券</text>
					<text v-if="couponType===0||couponType===2">-{{ couponName ? couponName+'元' : '0元' }}</text>
					<text
						v-if="couponType===1">-{{ couponName ? (taskAmount/100)*(100-couponName*100)/100+'元' : '0元' }}</text>
				</view>
				<view v-if="serverFlag == 0">
					<text>消费诚意金</text>
					<text>-{{ type ==  'single' ? singleSincerityGold/100 : (sincerityGold/100) }}元</text>
				</view>
			</view>
			<view class="total">
				<text>总计</text>
				<!-- <text>{{ finalAmount/100 }}元</text> -->
				<text>{{ finalAmountD }}元</text>
			</view>
		</view>
		<view class="confirm" @click="handlePaySettlement">立即支付</view>
		<!-- 密码弹框 -->
		<view class="share-modal" v-if="isOpenModal">
			<view class="main" :class="{'errorpw':isShowPassWordAnimation}">
				<image @click="handleCloseModal" class="close" src="https://images.linglinggong.net/icon1/47.png">
				</image>
				<view class="modal-title">
					<text>请输入支付密码</text>
				</view>
				<view class="modal-content">
					<view class="modal-content-line">
						<u-line color="#ccc"></u-line>
					</view>
					<view class="modal-content-money">
						<view class="rmb">￥</view>
						<view class="rmb-num">{{finalAmountD}}</view>
					</view>
					<view class="modal-content-type">
						<view class="modal-content-type-left">支付方式</view>
						<view class="modal-content-type-right">
							<image src="https://images.linglinggong.net/static/rmb.png" mode="widthFix"></image>
							<text>余额</text>
						</view>
					</view>
				</view>
				<view class="pay-code">
					<input v-if="focus" type="number" :focus="focus" v-model="taskDTO.payPwd" maxlength="6"
						@input="getPayCode" />
					<block v-for="(item, index) in ranges" :key="index">
						<view :class="['box', { active: codeIndex === item}]">
							<view class="line"></view>
							<text>{{ codeArr[index] ? codeArr[index] : ''}}</text>
						</view>
					</block>
				</view>
				<view class="repwd" v-if="!isShowForgetPassword" @click="toRePasssWord">忘记密码</view>
				<view class="repwd" style="color: #FE4B28;" v-if="isShowForgetPassword" @click="toRePasssWord">忘记密码
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		IsCouponAvailable
	} from '../../../libs/unit.js'
	export default {
		data() {
			return {
				serverFlag: 0, //0不用付服务费，1付服务费
				// orderAmount: '',//单个订单金额
				taskId: '', //单个结算任务id
				singleSincerityGold: '', //单人结算保证金
				type: '', //single是订单结算
				isShowCode: true,
				focus: false,
				codeIndex: 1,
				codeArr: [], //密码
				ranges: [1, 2, 3, 4, 5, 6],
				taskAmount: 0, //总计薪资,//单个订单金额
				isOpenModal: false, //是否打开分享弹框
				userInfo: {
					user: {},
					params: {}
				}, //当前用户信息
				taskDTO: {
					"couponId": '',
					"orderParam": {}, //'订单id': 'finishAmount'
					"payPwd": "",
					// #ifdef MP-ALIPAY || MP-TOUTIAO
					"payType": 0, //0支付宝，1微信，2钱包  //taskId cardId
					// #endif
					// #ifdef MP-WEIXIN
					"payType": 3, //0支付宝，1微信，2钱包  //taskId cardId
					//#endif
					"taskId": '',
				},
				couponName: '', //优惠券名字
				sincerityGold: '', //诚意金
				finalAmount: '', //总计
				orderId: '', //结算的订单id
				finalAmountD: '', //只用于展示的结算金额,不做逻辑运算
				isShowForgetPassword: false, //是否弹出忘记密码
				isShowPassWordAnimation: false, //密码错误执行动画,
				hasCoupon: '', //是否使用优惠券的状态,
				berforCoupon: 0, // 使用优惠券前的实际金额
				isStatus: false,
				couponAvailableList: [],
				staffId: 0,
				couponTypeObj: {},
				couponType: '',
			};
		},
		methods: {
			// 得到输入的密码
			getPayCode(e) {
				let {
					value
				} = e.detail
				let del = false
				this.taskDTO.payPwd = value
				if (value.length < this.codeArr.length) {
					del = true
				}
				this.codeArr.length = value.length
				this.codeArr.fill("●")
				this.codeIndex = this.codeArr.length + 1
				if (del) {
					return
				}
				this.codeArr[value.length - 1] = value[value.length - 1]
				setTimeout(() => {
					if (this.codeArr.length != 0) {
						this.$set(this.codeArr, [this.codeArr.length - 1], "●")
					}
				}, 1000)
				if (this.codeIndex == 7) {
					this.handleComfirmPay()
				}
				console.log('codeArr', this.codeIndex)
			},
			//选择优惠券
			handleChooseCoupon() {
				let amount = this.taskAmount / 100
				uni.navigateTo({
					url: '/pages/app-employer/my-coupon/my-coupon?berforCoupon=' + this.berforCoupon + '&amount=' +
						amount
				})
			},
			//点击链接至账户安全。
			toRePasssWord() {
				uni.navigateTo({
					url: '/pages/account-security/account-security'
				})
			},
			//钱包支付 输密码确认
			async handleComfirmPay() {
				//this.isOpenModal = false
				if (this.type == 'single') {
					let singleObj = {
						amount: this.taskAmount,
						couponId: this.taskDTO.couponId,
						orderId: this.orderId,
						payPwd: this.taskDTO.payPwd,
						payType: 2,
						taskId: this.taskId,
					}
					console.log('钱包支付单个条件singleObj', singleObj)
					let res = await this.$fetch(this.$api.v1_settlement_single_task, singleObj, 'POST', 'JSON')
					console.log('单个结算结果', res)
					if (res.code) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						if (res.msg == '结算任务失败请设置支付密码') {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/account-security/account-security'
								})
							}, 1200)
						} else {
							this.emptyInput()
						}
						return
					} else {
						uni.showToast({
							title: '结算成功~',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/app-employer/finishInvite/finishInvite?taskId=' + this
									.taskId
							})
						}, 800)
					}
				} else {
					let taskDTOR = {
						"couponId": this.taskDTO.couponId,
						"orderParam": {}, //'订单id': 'finishAmount'
						"payPwd": this.taskDTO.payPwd,
						"payType": 2, //0支付宝，1微信，2钱包
						"taskId": this.taskDTO.taskId,
					}
					for (let key in this.taskDTO.orderParam) {
						taskDTOR.orderParam[key] = this.taskDTO.orderParam[key] * 100
					}
					console.log('钱包支付全部条件taskDTOR', taskDTOR)
					let res = await this.$fetch(this.$api.v1_settlement_task, taskDTOR, 'POST', 'JSON')
					if (res.code) {
						console.log('统一结算结果', res)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						if (res.msg == '结算任务失败请设置支付密码') {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/account-security/account-security'
								})
							}, 1200)
						} else {
							this.emptyInput()
						}
						return
					} else {
						uni.showToast({
							title: '结算成功~',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/app-employer/finishInvite/finishInvite?taskId=' + this
									.taskId
							})
						}, 800)
					}
				}
				this.handleCloseModal()
			},
			//支付密码错误，清除输入框，运行动画，显示忘记密码
			emptyInput() {
				this.isShowPassWordAnimation = true
				this.isShowForgetPassword = true
				this.taskDTO.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
				setTimeout(() => {
					this.isShowPassWordAnimation = false
				}, 1200)
			},
			// 关闭弹框
			handleCloseModal() {
				this.isOpenModal = false
				this.taskDTO.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
			},
			//选择支付类型
			handleSelect(index) {
				console.log('触发了', index)
				this.taskDTO.payType = index
			},
			// 支付，
			async handlePaySettlement() {
				if (this.finalAmount <= 0) {
					uni.showToast({
						title: '剩余保证金将会存入钱包~',
						icon: 'none'
					})
					this.taskDTO.payType = 2
				}
				// console.log('this.taskDTO', this.taskDTO)
				// 支付宝
				if (this.taskDTO.payType == 0) {
					if (this.type == 'single') {
						let singleObj = {
							amount: this.taskAmount,
							couponId: this.taskDTO.couponId,
							orderId: this.orderId,
							payPwd: this.taskDTO.payPwd,
							payType: 0,
							taskId: this.taskId,
						}
						console.log('singleObj', singleObj)
						var res = await this.$fetch(this.$api.v1_settlement_single_task, singleObj, 'POST', 'JSON')
						console.log('单个结算结果', res)
					} else {
						let taskDTOR = {
							"couponId": this.taskDTO.couponId,
							"orderParam": {}, //'订单id': 'finishAmount'
							"payPwd": this.taskDTO.payPwd,
							"payType": 0, //0支付宝，1微信，2钱包
							"taskId": this.taskDTO.taskId,
						}
						for (let key in this.taskDTO.orderParam) {
							taskDTOR.orderParam[key] = this.taskDTO.orderParam[key] * 100
						}
						var res = await this.$fetch(this.$api.v1_settlement_task, taskDTOR, 'POST', 'JSON')
					}
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.msg, //微信、支付宝订单数据
						success: function(res) {
							uni.showToast({
								title: '结算成功~',
								icon: 'none'
							})
							//setTimeout
							(() => {
								if (this.isStatus == 'true') {
									uni.redirectTo({
										url: '/pages/app-employer/finishInvite/finishInvite?taskId=' +
											this.taskId
									})
								} else {
									uni.redirectTo({
										url: '/pages/my-job/boss-my-job-new'
									})
								}
							}, 800)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					})
					// 钱包
				} else if (this.taskDTO.payType == 2) {
					this.isOpenModal = true
					this.focus = true
					// 微信支付
				} else {
					if (this.type == 'single') {
						let singleObj = {
							paybegtype: "wx",
							amount: this.taskAmount,
							couponId: this.taskDTO.couponId,
							orderId: this.orderId,
							payPwd: this.taskDTO.payPwd,
							payType: 3,
							taskId: this.taskId,
						}
						singleObj.paybegtype = "wx"
						var res = await this.$fetch(this.$api.v1_settlement_single_task, singleObj, 'POST', 'JSON')
					} else {
						let taskDTOR = {
							"paybegtype": "wx",
							"couponId": this.taskDTO.couponId,
							"orderParam": {}, //'订单id': 'finishAmount'
							"payPwd": this.taskDTO.payPwd,
							"payType": 3, //0支付宝，1微信，2钱包
							"taskId": this.taskDTO.taskId
						}
						for (let key in this.taskDTO.orderParam) {
							taskDTOR.orderParam[key] = this.taskDTO.orderParam[key] * 100
						}
						taskDTOR.paybegtype = "wx"
						var res = await this.$fetch(this.$api.v1_settlement_task, taskDTOR, 'POST', 'JSON')
					}
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.MP_WXPay(res.data)
				}
			},
			/* 微信小程序支付 */
			MP_WXPay(info) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: info.timeStamp, //时间戳
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType,
					paySign: info.paySign, // undefined
					success: res => {
						console.log('success:' + JSON.stringify(res));
						uni.showToast({
							title: '结算成功~',
							icon: 'none'
						})
						setTimeout(() => {
							if (this.isStatus == 'true') {
								uni.redirectTo({
									url: '/pages/app-employer/finishInvite/finishInvite?taskId=' +
										this.taskId
								})
							} else {
								uni.redirectTo({
									url: '/pages/my-job/boss-my-job-new'
								})
							}
						}, 800)
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				})
			},
			// 获取任务详情保证金
			async task_detail(finishNum) {
				let res = await this.$fetch(this.$api.task_detail, {
					taskId: this.taskDTO.taskId
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.sincerityGold = Math.round((res.data.sincerityGold / res.data.number) * finishNum)
				console.log('sincerityGold-----', this.sincerityGold, 'finishNum', finishNum, '实际诚意金', res.data
					.sincerityGold)
				this.getFinalAmount()
			},
			// 获取最后结算金额
			getFinalAmount() {
				console.log('结算页面this.serverFlag', this.serverFlag, this.sincerityGold, this.singleSincerityGold)
				this.sincerityGold = this.serverFlag == 1 ? 0 : this.sincerityGold
				this.singleSincerityGold = this.serverFlag == 1 ? 0 : this.singleSincerityGold
				if (this.type == 'single') {
					if (this.couponType === 1) {
						this.finalAmount = (this.taskAmount - this.singleSincerityGold - (this.taskAmount / 100) * (100 -
							this.couponName * 100))
					} else {
						this.finalAmount = (this.taskAmount - this.singleSincerityGold - this.couponName * 100)
					}
					// 210416-jc
					this.berforCoupon = (this.taskAmount - this.singleSincerityGold).divide(100).toFixed(2)
				} else {
					// 210416-jc
					this.berforCoupon = (this.taskAmount - this.sincerityGold).divide(100).toFixed(2)
					// 获取最后的结算金额 单位分
					if (this.couponType === 1) {
						this.finalAmount = (this.taskAmount - this.sincerityGold - (this.taskAmount / 100) * (100 - this
							.couponName * 100))
					} else {
						this.finalAmount = (this.taskAmount - this.sincerityGold - this.couponName * 100)
					}
				}
				console.log('扣除诚意金后的金额' + this.berforCoupon)
				//只用于展示的结算金额,不做逻辑运算
				this.finalAmountD = this.finalAmount.divide(100).toFixed(2)
				if (this.type !== 'single') {
					IsCouponAvailable(this.finalAmountD).then(v => {
						this.couponAvailableList = v
						if (this.couponAvailableList.length > 2) {
							this.couponTypeObj = this.couponAvailableList[2].find((item) => {
								return item.remark === '推荐奖励优惠卷'
							});
						}
						if (!this.couponTypeObj) {
							this.couponTypeObj = {}
						}
					})
				}
			},
			// 获取当前用户信息
			async getUserInfo() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.setStorageSync('userInfo', res.data)
				uni.setStorageSync('userType', res.data.userType)
				uni.setStorageSync("level", res.data.user.level) //用户等级
				this.userInfo = res.data
			},
		},
		onLoad(options) {
			this.type = options.type
			this.isStatus = options.isStatus
			this.serverFlag = options.serverFlag
			this.staffid = options.staffid
			// 获取使用优惠券的状态-jc0416
			this.hasCoupon = options.iscoupon;
			console.log('结算页面this.serverFlag', this.serverFlag)
			if (options.type == 'single') {
				console.log('单个结算页面参数', options)
				this.orderId = options.orderId
				this.taskId = options.taskId
				this.taskAmount = options.orderAmount * 100
				this.singleSincerityGold = options.singleSincerityGold
				this.getFinalAmount()
			} else {
				this.taskDTO = JSON.parse(options.taskDTO)
				this.taskId = this.taskDTO.taskId
				console.log('this.taskDTO结算页面参数：', this.taskDTO)
				Object.values(this.taskDTO.orderParam).forEach(item => {
					this.taskAmount = this.taskAmount + item * 100
				})
				this.task_detail(options.finishNum)
			}
			IsCouponAvailable(this.finalAmountD).then(v => {
				this.couponAvailableList = v
				console.log(this.couponAvailableList)
				if (this.couponAvailableList.length > 2) {
					this.couponTypeObj = this.couponAvailableList[2].find((item) => {
						return item.remark === '推荐奖励优惠卷'
					});
				}
				if (!this.couponTypeObj) {
					this.couponTypeObj = {}
				}
			})
		},
		onShow() {
			uni.hideKeyboard()
			this.userInfo = uni.getStorageSync('userInfo')
			this.getUserInfo()
			this.getFinalAmount()
		},
		onNavigationBarButtonTap() {
			if (this.type == 'single') {
				uni.navigateTo({
					url: '/pages/app-employer/boss-settlement-detail/boss-settlement-detail?type=single&orderId=' +
						this.orderId + '&orderAmount=' + this.taskAmount
				})
			} else {
				console.log('跳明细', this.taskDTO)
				uni.navigateTo({
					url: '/pages/app-employer/boss-settlement-detail/boss-settlement-detail?taskDTO=' + JSON
						.stringify(this.taskDTO)
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.container {
		overflow: hidden;

		.share-modal {
			z-index: 11;
			position: fixed;
			bottom: 0;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0, 0, 0, 0.40);
			display: flex;
			align-items: center;
			justify-content: center;

			&>.main {
				position: relative;
				top: -100rpx;
				width: 570rpx;
				// height: 250rpx;
				padding: 30rpx;
				background: #FFFFFF;
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
				border-radius: 17px;
				line-height: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>.modal-title {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 20rpx;

					// margin: 30rpx 0 50rpx;
					&>.imgs {
						position: relative;

						image {
							position: absolute;
							top: 0rpx;
							bottom: 0;
							right: -80rpx;
							width: 50rpx;
							height: 40rpx;
						}
					}
				}

				.modal-content {
					width: 100%;
					height: 240rpx;

					// border: 1px solid;
					.modal-content-line {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 30rpx 30rpx;
					}

					.modal-content-money {
						width: 100%;
						height: 100rpx;
						margin-top: -10rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						// border:1px solid;
						.rmb {
							font-size: 40rpx;
							color: #333333;
							margin-right: 10rpx;
							font-weight: 600;
							margin-top: 15rpx;
						}

						.rmb-num {
							font-size: 66rpx;
							color: #333333;
							font-weight: 600;
						}
					}

					.modal-content-type {
						width: 92%;
						margin: 0 auto;
						height: 80rpx;
						// border: 1px solid;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.modal-content-type-left {}

						.modal-content-type-right {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 40rpx;
								height: 100%;
							}

							text {
								margin-left: 6rpx;
								color: #333333;
								font-size: 26rpx;
							}
						}
					}
				}

				&>.pay-code {
					padding-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					position: relative;

					&>input {
						position: absolute;
						top: 0;
						left: -100%;
						width: 200%;
						height: 100%;
						text-align: left;
						z-index: 9;
						opacity: 1;
					}

					&>.box {
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						width: 80rpx;
						height: 80rpx;
						margin-right: 10rpx;
						font-size: 22px;
						line-height: 90rpx;
						box-sizing: border-box;
						background-color: #F2F2F2;
						border-radius: 2px;

						&:last-child {
							margin-right: 0;
						}
					}

					&>.active {
						border: 2rpx solid #cccccc;

						@keyframes twinkling {
							0% {
								opacity: 0.1;
							}

							50% {
								opacity: 0.8;
							}

							100% {
								opacity: 0.1;
							}
						}

						&>.line {
							display: block;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 2upx;
							height: 40upx;
							background: #333333;
							animation: twinkling 1s infinite ease;
						}
					}
				}

				.repwd {
					height: 62rpx;
					margin-bottom: -30rpx;
					font-size: 24rpx;
					color: #999999;
					// border: 1px solid;
					width: 92%;
					margin: 0 auto;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				&>.button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 70rpx;
					margin-top: 60rpx;
					border-radius: 50rpx;
					background-color: #FCC928;

					&:active {
						opacity: 0.7;
					}
				}

				&>.close {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		&>.choose {
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 0;

			&>text {
				margin-bottom: 20rpx;
				height: 40rpx;
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					left: -30rpx;
					width: 4rpx;
					height: 28rpx;
					background: #FCC928;
					border-radius: 1px;
				}
			}

			&>.ipt {
				&>view {
					position: relative;
					display: flex;
					align-items: center;
					padding: 29rpx 0;

					&>.my-money {
						margin-left: 20rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.50);
					}

					// 横线
					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						right: -30rpx;
						width: 654rpx;
						height: 2rpx;
						background: #F2F2F2;
						border-radius: 1px;
					}

					//圆圈
					.circle {
						width: 33rpx;
						height: 33rpx;
						margin-right: 30rpx;
						border-radius: 50%;
						border: 1px solid rgba(64, 33, 16, 0.30);
					}

					//圆圈
					// &::before {
					// 	content: "";
					// 	width: 33rpx;
					// 	height: 33rpx;
					// 	position: absolute;
					// 	border-radius: 50%;
					// 	border: 1px solid rgba(64,33,16,0.30);
					// }
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 30rpx;
					}

					.img {
						width: 42rpx;
						height: 42rpx;
						margin-right: 20rpx;
					}

					// image:first-child {
					// 	width: 36rpx;
					// 	height: 36rpx;
					// 	margin-right: 30rpx;
					// }
					// image:nth-child(2) {
					// 	width: 42rpx;
					// 	height: 42rpx;
					// 	margin-right: 20rpx;
					// }
				}
			}
		}

		&>.main {
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			padding: 30upx;
			margin-top: 30rpx;

			&>.title {
				// border: 1px solid #000000;
				margin-bottom: 30rpx;
				display: flex;
				width: 690rpx;
				justify-content: space-between;
				align-items: center;

				&>text {
					height: 40rpx;
				}

				&>view {
					display: flex;
					align-items: center;

					&>text {
						margin-right: 30rpx;
					}

					&>text:first-child {
						// color: rgba(64, 33, 16, 0.50);
					}

					&>image {
						width: 16rpx;
						height: 26rpx;
					}
				}
			}

			&>.detail {
				position: relative;
				padding: 30rpx 0;
				text-align: right;

				&>view {
					// border: 1px solid #000000;
					margin-bottom: 20rpx;
				}

				&>view:last-child {
					margin-bottom: 0rpx;
				}

				text:first-child {
					margin-right: 30rpx;
					color: rgba(64, 33, 16, 0.50);
				}

				//横线
				&::before {
					content: "";
					position: absolute;
					top: 0rpx;
					left: 0;
					width: 690rpx;
					height: 2rpx;
					background: #f2f2f2;
					border-radius: 1px;
				}

				//横线
				&::after {
					content: "";
					position: absolute;
					right: 0;
					bottom: 0rpx;
					width: 690rpx;
					height: 2rpx;
					background: #f2f2f2;
					border-radius: 1px;
				}
			}

			&>.total {
				text-align: right;
				margin-top: 30rpx;

				text:first-child {
					margin-right: 30rpx;
					color: rgba(64, 33, 16, 0.50);
				}

				text:last-child {
					font-size: 17px;
					color: #FF650C;
					font-weight: bold;
				}
			}
		}

		&>.confirm {
			position: fixed;
			bottom: 0;
			background: #FCC928;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 100rpx;

			&:active {
				opacity: 0.7;
			}
		}
	}

	.repwd {
		height: 40rpx;
		margin-bottom: -40rpx;
		font-size: 18rpx;
		color: #FE4B28;
	}

	.errorpw {
		animation: swing 1s .15s linear 1;
	}

	@keyframes swing {

		10%,
		90% {
			transform: translate(-4rpx, 0);
		}

		20%,
		80% {
			transform: translate(+4rpx, 0);
		}

		30%,
		70% {
			transform: translate(-6rpx, 0);
		}

		40%,
		60% {
			transform: translate(+6rpx, 0);
		}

		50% {
			transform: translate(-8rpx, 0);
		}
	}

	.couponAvailable {
		height: 36rpx;
		background: linear-gradient(90deg, #FFBB3F, #FD7600);
		border-radius: 18rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 36rpx;
		padding: 0 20rpx;
	}

	.couponAvailable-num {
		font-size: 28rpx;
		font-weight: 500;
		color: #FF650C;
		line-height: 45rpx;
	}

	.couponAvailable-no {
		font-size: 28rpx;
		font-weight: 500;
		color: #9F9087;
		line-height: 45rpx;
	}
</style>